今天要講的是金魚都能懂的網頁切版 : 人員介紹卡片 NO003。

本篇關鍵字

• clip-path
• animation
• transform: translateY()

範例檔

HTML

<div class="container">
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=1">
    </div>
    <div class="text">
      <h2>Zombi@Dump</h2>
      <p>一個今年誤入鐵人賽的切版新手，在自己產出的垃圾 Code 中打滾，希望可以透過不斷的練習，看看能不能讓我的 Code 從垃圾變成點什麼有用的東西（最好是錢，絕對要是錢）。</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=2">
    </div>
    <div class="text">
      <h2>Zombi@Dump</h2>
      <p>一個今年誤入鐵人賽的切版新手，在自己產出的垃圾 Code 中打滾，希望可以透過不斷的練習，看看能不能讓我的 Code 從垃圾變成點什麼有用的東西（最好是錢，絕對要是錢）。</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=3">
    </div>
    <div class="text">
      <h2>Zombi@Dump</h2>
      <p>一個今年誤入鐵人賽的切版新手，在自己產出的垃圾 Code 中打滾，希望可以透過不斷的練習，看看能不能讓我的 Code 從垃圾變成點什麼有用的東西（最好是錢，絕對要是錢）。</p>
    </div>
  </div>
</div>

CSS

body {
  width: 100%;
  height: 100vh;
  background-color: rgb(10, 0, 77);
  display: flex;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
}

.item {
  width: 370px;
  margin: 0 15px;
  border: 1px solid #aaa;
  background-color: rgb(255, 255, 255);
  transition: .5s;
}

.item:hover {
  animation: upDown 1s linear;
}

.item .pic{
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.item img {
  width: 100%;
  vertical-align: middle;
}

.item .text {
  padding: 40px 20px;
}

.item:hover {
  background-image: linear-gradient(0deg, #c33222 0%, #fdbb2d 40%);
}

.item .text h2 {
  padding-bottom: .3em;
  margin-bottom: .5em;
  font-weight: 900;
  border-bottom: 1px solid #000;
  text-align: center;
}

.item .text p {
  line-height: 1.8;
  font-weight: 300;
}

.item:hover .text h2 {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.item:hover .text p {
  color: #fff
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }

  75% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0);
  }
}

喪屍分解

• 影片中，圖片的三角形是使用 ::before 做出來的，這個講過滿多次的了，可以參考前面幾篇講到的作法
• 使用 clip-path 做出五邊形，套用在圖片上，讓圖片直接就是我所期望的長相，我是使用 https://bennettfeely.com/clippy/ 來繪製
• 使用 background-image 做出 :hover 時漸層效果，剛好 Amos 今年的鐵人賽也有寫到這個，附上連結
• 使用 transform: translateY() 做出 .item 上下移動的動畫

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是登入表單。